<template>
	<div v-if="loading" class="flex justify-center items-center min-h-[200px]">
		<!-- <base-loading /> -->
		<BaseLoadingCircle />
	</div>
	<div v-else-if="rewardsList.length">
		<base-list-horizontal v-if="isPC() && !vertical" :list="rewardsList">
			<template #title>
				<div class="flex items-center justify-center gap-1">
					<base-icon name="win" class="text-[26px]" color="#7864ff" />
					<p class="text-lg text-t-1">{{ t('app.rewards') }}</p>
				</div>
			</template>
			<template #default="{ item }">
				<reward-card-item v-if="item.isShow" :item="item" :onClick="onClick" />
			</template>
		</base-list-horizontal>

		<div v-else>
			<div class="flex items-center gap-1 p-2">
				<base-icon name="win" class="text-[26px]" color="#7864ff" />
				<p class="text-lg text-t-1">{{ t('app.rewards') }}</p>
			</div>
			<div class="grid grid-cols-2 gap-4" :style="vertical && 'padding:20px'">
				<div v-for="item in rewardsList" :key="item.title">
					<reward-card-item v-if="item.isShow" :item="item" :onClick="onClick" />
				</div>
			</div>
		</div>
	</div>
	<div v-else>
		<div class="flex items-center gap-1 p-2">
			<base-icon name="win" class="text-[26px]" color="#7864ff" />
			<p class="text-lg text-t-1">{{ t('app.rewards') }}</p>
		</div>
		<div class="flex flex-col justify-center items-center">
			<base-image src="activity/reward/phone.png" style="width: 120px" />
			<div class="text-t-4 text-sm">{{ t('vip.noRewards') }}</div>
		</div>
	</div>
	<MoneyPopup v-model:isShow="isShow" :current="current" :onClick="onClickAquire" />
</template>

<script setup lang="ts">
import RewardCardItem from '@/views/activity/components/reward-card-item/index.vue'
import { BaseIcon, BaseImage, BaseListHorizontal, BaseLoadingCircle } from '@/components/base'
import MoneyPopup from '../money-popup/index.vue'
import { ref } from 'vue'
import { isPC, fmtAmount, t } from '@/utils'
import { getUpgradeReward } from '@/api/activity'

defineProps({
	vertical: { type: Boolean, required: false, default: false }
})
const isShow = ref(false)
const current = ref({})
const onClick = (item: any) => {
	isShow.value = true
	current.value = item
}
const onClickAquire = () => {
	request()
}
const formatDateTime = (dateArr: number[]) => {
	if (!dateArr || dateArr.length !== 6) return ''
	const [year, month, day, hour, minute] = dateArr
	return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')} ${day}/${month}/${year}`
}
const rewardsList = ref<any[]>([])
const loading = ref(true)

const request = async () => {
	try {
		loading.value = true
		let res = await getUpgradeReward()
		rewardsList.value = res.data.map((item: any) => {
			let btnDisabled = item.bonusType === 2 || item.bonusType === 7 || item.bonusType === 0
			let icon
			let content
			switch (item.bonusType) {
				case 1:
					icon = 'level.png'
					content = t('activity.rewards.levelUpBonus')
					break
				case 2:
					icon = 'bet.png'
					content = ''
					break
				case 3:
					icon = 'rebates.png'
					content = t('activity.rewards.rebateBonus')
					break
				case 4:
					icon = 'weekly.png'
					content = t('activity.rewards.weeklyBonus')
					break
				case 5:
					icon = 'group.png'
					content = t('activity.rewards.monthlyBonus')
					break
				case 6:
					icon = 'bonus.png'
					content = t('activity.rewards.loyaltyBonus')
					break
				case 7:
					icon = 'pouch.png'
					content = ''
					break
				case 0:
					icon = 'deposit.png'
					content = ''
					break
			}
			let extra = ''
			if (item.bonusType === 1) {
				extra = item.levelAfter
			} else if (item.bonusType === 7) {
				extra = t('activity.rewards.upTo', { amount: fmtAmount(item.bonusAmount) })
			}
			const now = new Date()
			const distributedAt = new Date(item.expiredAt)
			const day =
				item.bonusStatus === 0
					? 0
					: Math.ceil((distributedAt.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
			let status
			if (item.bonusType === 7) {
				status = 0
			} else if (item.bonusType === 3) {
				status = item.bonusStatus === 0 ? 1 : 2
			} else {
				status = item.bonusStatus === 0 ? 4 : 3
			}

			return {
				id: item.id,
				userId: item.userId,
				title: item.bonusName,
				content,
				extra,
				day,
				receiveTime: item.distributedAt,
				overdueTime: formatDateTime(item.expiredAt),
				isShow: true,
				btnText: item.bonusType === 0 ? t('receive') : t('aquire'),
				money: item.bonusAmount,
				icon,
				status,
				btnDisabled,
				bonusAmountCurrency: item.bonusAmountCurrency,
				expiredAt: item.expiredAt,
				bonusStatus: item.bonusStatus
			}
		})
	} finally {
		loading.value = false
	}
}
request()
</script>

<style scoped></style>
